<template>
  <div class="aside">
    <el-menu
      default-active="1-1"
      class="el-menu-vertical-demo"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse"
    >
      <el-submenu v-for="(item, index) in menu" :key="index" :index="`${index + 1}`">
        <template slot="title" :to="item.path">
          <i :class="item.icon"></i>
          <span>{{item.title}}</span>
        </template>
        <el-menu-item
          v-for="(subItem, subIndex) in item.group"
          :key="subIndex"
          :index="`${index + 1}-${subIndex + 1}`"
        >
          <router-link :to="subItem.path">{{subItem.title}}</router-link>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          title: "购物商场",
          icon: "el-icon-menu",
          group: [
            {
              title: "商品管理",
              path: "/admin/goods-list"
            },
            {
              title: "栏目管理",
              path: "/admin/category-list"
            }
          ]
        },
        {
          title: "会员管理",
          icon: "el-icon-service",
          group: [
            {
              title: "会员列表",
              path: "/admin/account-list"
            }
          ]
        },
        {
          title: "商城订单",
          icon: "el-icon-tickets",
          group: [
            {
              title: "订单管理",
              path: "/admin/order-list"
            }
          ]
        }
      ]
    };
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: true
    }
  }
};
</script>

<style>
.aside {
  box-sizing: border-box;
  padding-top: 30px;
  background-color: rgb(0, 33, 64);
}
.el-menu {
  height: 100%;
  border-right-width: 0px;
  background-color: rgb(0, 21, 41);
  width: auto;
}
.el-submenu__title:focus,
.el-submenu__title:hover,
.el-submenu__title:active {
  background-color: rgb(0, 21, 41);
}
.el-menu-item:focus,
.el-menu-item:hover,
.el-menu-item:active {
  background-color: rgb(0, 12, 23);
}
div.el-submenu__title:hover {
  background-color: rgb(0, 21, 41);
}
.el-submenu.is-active .el-submenu__title:hover {
  background-color: rgb(0, 21, 41);
}
.el-menu-item {
  background-color: rgb(0, 12, 23);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
